<template>
	<view class="tabber-bottom">
	<view class="cu-bar foot tabbar bg-white">
		<view v-for="(item,index) in Menus" :key="index" @click="handleChange(index)" class="action">
			<view class="cuIcon-cu-image">
				<image v-if="index==active" :src="item.selectedIconPath"></image>
				<image v-else :src="item.iconPath"></image>
				<!-- <view class="cu-tag badge"></view> -->
			</view>
			<view :class="index==active?'text-checked':'text-checked-no'">{{item.text}}</view>
		</view>
	</view>
	</view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
const emit = defineEmits(['action', 'load']);
const props = defineProps({
	value: {
		type: Number,
		default: 0
	}
});
const Menus = [
	{
		pagePath: '/pages/home/index',
		text: '首页',
		iconPath: '',
		selectedIconPath: ''
	}
];
const active = ref(props.value);
watch(
	() => props.value,
	(newValue, oldValue) => {
		active.value = newValue;
	}
);
const handleChange = (index: number) => {
	active.value = index;
	uni.reLaunch({
		url:Menus[index].pagePath
	})
	emit('action', index);
};
</script>

<style lang="scss" scoped>
	.cu-bar.tabbar .action .cuIcon-cu-image {
	    image{
			width: 15px;
			height: 16px;
		}
	}
	.text-checked{
		font-size: 12px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #147FEF;
		line-height: 15px;
	}
	.text-checked-no{
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #777777;
		line-height: 15px;
	}
	.cu-bar.tabbar .action {
	    margin-top: 6px;
	}
	.cu-bar.tabbar {
	    padding: 0;
	    height: calc(120rpx + env(safe-area-inset-bottom) / 2);
	    padding-bottom: calc(env(safe-area-inset-bottom) / 2);
	}
	.tabber-bottom{
		height: calc(120rpx + env(safe-area-inset-bottom) / 2);
	}
</style>
